<template>
  <transition name="slide">
    <div class="detailContainer">
      <header class="header">
        <router-link to='/kind' class="iconfont icon-jiantou3"></router-link>
        <p>SALE攻略</p>
        <span class="iconfont icon-fenxiang"></span>
      </header>
      <div class="content">
        <!-- 攻略——文章 开始-->
        <div class="atc">
          <div class="t-title">
            <h1> {{title}} </h1>
            <div>
              <span> {{123}} 阅读</span>
              <span @click="showIcon = !showIcon" :class="`iconfont icon-${showIcon ? 'shoucang3' : 'shoucang1'}`">
                收藏
              </span>
            </div>
          </div>
          <img :src="img" />
          <div class="atc-content">
            <p>“陆止于此，海始于斯”，葡萄牙“诗魂”卡蒙斯世代传颂的名句生动描绘出他的祖国所处优越地理位置。20年前，我曾有机会到访葡萄牙，2014年又过境特塞拉岛。应德索萨总统邀请，我将再次踏上这片沃土，对贵国进行国事访问，感到由衷的高兴。 </p><br/>
            <p>近年来，葡萄牙成功应对欧洲主权债务危机挑战，在发展国民经济、弘扬民族文化、促进社会进步等方面取得重要成就，古老大地不断焕发勃勃生机。作为葡萄牙人民的真诚朋友，中国人民对此表示钦佩。 </p><br/>
          </div>
        </div>
        <!-- 攻略——文章 结束-->
        <div class="border-b"></div>
        <!-- 攻略——精选好货 开始-->
        <div class="goods">
          <div class="goods-title">
            <h1>精选好货</h1>
          </div>
          <div class="goods-list">
            <mt-swipe :show-indicators="false">
              <!-- 1 -->
              <mt-swipe-item>
                <!-- 1-1 -->
                <div class="goods-li" @click= "goDetail(item)">
                  <img src="data[0].images.small" />
                  <div class="goods-li-content">
                    <div class="price">
                      <span>
                        ￥{{111}}
                      </span>
                      <span>
                        ￥{{111}}
                      </span>
                    </div>
                    <p>
                      {{title}}
                    </p>
                  </div>
                </div>
                <div class="goods-li">
                  <!-- 1-2 -->
                  <div class="goods-li" @click= "goDetail(item)">
                    <img src="" alt="" />
                    <div class="goods-li-content">
                      <div class="price">
                        <span>
                          ￥{{222}}
                        </span>
                        <span>
                          ￥{{222}}
                        </span>
                      </div>
                      <p>
                        商品名称2
                      </p>
                    </div>
                  </div>
                </div>
              </mt-swipe-item>
              <!-- 2 -->
              <mt-swipe-item>
                <!-- 2-1 -->
                <div class="goods-li"  @click= "goDetail(item)">
                  <img src="" alt="" />
                  <div class="goods-li-content">
                    <div class="price">
                      <span>
                        ￥{{333}}
                      </span>
                      <span>
                        ￥{{333}}
                      </span>
                    </div>
                    <p>
                      商品名称3
                    </p>
                  </div>
                </div>
                <div class="goods-li">
                  <!-- 2-2 -->
                  <div class="goods-li" @click= "goDetail(item)">
                    <img src="" alt="" />
                    <div class="goods-li-content">
                      <div class="price">
                        <span>
                          ￥{{444}}
                        </span>
                        <span>
                          ￥{{444}}
                        </span>
                      </div>
                      <p>
                        商品名称4
                      </p>
                    </div>
                  </div>
                </div>
              </mt-swipe-item>
            </mt-swipe>
          </div>
        </div>
        <!-- 攻略——精选好货 结束-->
        <div class="border-b"></div>
        <!-- 攻略——评论 开始-->
        <!-- 攻略——评论 结束-->
      </div>
    </div>
  </transition>
</template>

<script>
import axios from 'axios'
import detail from '@/components/detail/Index'
export default {
  props: ['id'],
  data () {
    return {
      title: '',
      img: '',
      rating: '',
      showIcon: false,
      detail: []
    }
  },
  components: {
    detail
  },
  created () {
    const id = this.$route.params.id
    axios.get(`/taotao/detail?id=${id}`)
      .then(data => {
        console.log(data)
        const obj = data.data[0]
        this.title = obj.title
        this.img = obj.images.small
        this.rating = obj.rating.average
      })
    fetch('/taotao/douban').then(res => res.json())
      .then(data => {
        console.log(data)
        this.datail = data
        console.log(data[0].title)
      })
  },
  methods: {
    goDetail (item) {
      this.$router.push(`/detail/${item.id}`)
    }
  }
}
</script>

<style lang="scss">
@import '@/lib/reset.scss';
.header {
  position: relative;
  @include line-height(0.44rem);
  p {
    @include rect(100%, 100%);
    text-align: center;
    @include font-size(0.16rem)
  }
}
.icon-jiantou3 {
  position: absolute;
  left: 0.1rem;
  color: #fff;
}
.icon-fenxiang {
  position: absolute;
  top:0;
  right: 0.15rem;
  font-size: 0.22rem;
  color: #fff;
}

.t-title {
  h1 {
    line-height: 0.5rem;
    text-align: center;
    font-size: 0.20rem
  }
  div {
    width: 100%;
    @include flexbox();
    @include justify-content(space-between);
    span {
      font-size: 0.16rem;
      @include margin(0 0.3rem);
    }
  }
}
.icon-shoucang3 {
  color: #fa2a83
}
//攻略--文章
.atc {
  min-height: 2rem;
  width: 100%;
  @include flexbox();
  @include justify-content();
  @include flex-direction(column);
  color: #000;
  img {
    @include rect(3.2rem, 1.51rem);
    @include margin(0.1rem auto);
  }
  .atc-content {
    text-indent: 2em;
    @include margin(0 0.3rem)
  }
}

//border
.border-b {
  @include rect(100%, 0.2rem);
  background: #e5e5e5;
}

//攻略--精选好货
.goods {
  @include rect(100%, 2.6rem);
  color: #000;
  //攻略--精选好货--title
  .goods-title {
    @include border(0 0 0.03rem 0, #e5e5e5, solid);
    h1 {
      @include rect(100%, 0.4rem);
      @include margin(0 0.3rem);
      line-height: 0.4rem;
      font-size: 0.18rem
    }
  }
  //攻略--精选好货--商品列表
  .goods-list {
    @include rect(96%, 2.2rem);
    @include margin(0.08rem 0.08rem 0.08rem 0.08rem);
    .goods-li {
      @include rect(45%, 2.1rem);
      @include margin(0 0.09rem);
      float: left;
      @include flexbox();
      @include justify-content();
      @include flex-direction(column);
      @include align-items();
      img {
        @include rect(1.5rem, 1.5rem);
        background: #e5e5e5;
        display: block
      }
      .goods-li-content {
        @include rect(1.5rem, 0.6rem);
        .price {
          @include rect(100%, 0.24rem);
          color: #fa2a83;
          span:first-child {
            line-height: 0.24rem;
          }
          span:last-child {
            color: #e5e5e5;
            text-decoration: line-through;
            font-size: 0.1rem
          }
        }
        p {
          @include rect(100%, 0.36rem);
          line-height: 0.18rem;
          font-size: 0.14rem
        }
      }
    }
  }
}
//攻略--评论
</style>
